<template>
	<view class="banmi_flex j-c">
		<view class="uni-popup-dialog">
			<view class="uni-dialog-title">
				<text class="v-text f38" style="color: #000;">添加{{t_name}}</text>
			</view>
			<view v-if="t_type=='applets'" class="banmi_flex j-c">
				<view class="p-20 " style="width: 80%;">
					<view class="banmi_flex a-c p-10">
						<view class="banmi_input_name-30">
							<text class="f-30 c-7">宣传标题:</text>
						</view>
						<view class="m-l-10 banmi_input_view ">
							<input class="f-14" type="text" placeholder="请输入标题" v-model="title"
								style="height: 40px;border-bottom: solid 1px #DCDCDC;">
						</view>
					</view>
					<view class="banmi_flex a-c p-10">
						<view class="banmi_input_name-30">
							<text class="f-30 c-7">小程序路径:</text>
						</view>
						<view class="m-l-10 banmi_input_view ">
							<input class="f-14" type="text" placeholder="请输入路径如/pages/index/index" v-model="miniprogram"
								style="height: 40px;border-bottom: solid 1px #DCDCDC;">
						</view>
					</view>
					<view class="p-10">
						<text class="f-14" style="color: red;">请联系小程序作者获取路径,比如/pages/index/index</text>
					</view>
					<view class="banmi_flex a-c p-10">
						<view class="banmi_input_name-30">
							<text class="f-30 c-7">备用跳转url:</text>
						</view>
						<view class="m-l-10 banmi_input_view ">
							<input class="f-14" type="text" placeholder="备用url,可不填" v-model="url"
								style="height: 40px;border-bottom: solid 1px #DCDCDC;">
						</view>
					</view>
					<view class="banmi_flex a-c p-10">
						<view class="banmi_input_name-30">
							<text class="f-30 c-7">小程序appid:</text>
						</view>
						<view class="m-l-10 banmi_input_view ">
							<input class="f-14" type="text" placeholder="请输入小程序appid" v-model="appid"
								style="height: 40px;border-bottom: solid 1px #DCDCDC;">
						</view>
					</view>
					<view class="banmi_flex a-c p-10">
						<view class="banmi_input_name-30">
							<text class="f-30 c-7">宣传图片:</text>
						</view>
						<view v-if="img_url"
							style="width: 200rpx;height: 200rpx;border: solid 2rpx #DCDCDC;font-size: 60px;color: #DCDCDC;margin: 5px;">
							<image style="width: 200rpx;height: 200rpx;" :src="img_url" mode=""></image>
						</view>
						<view class="" @click="_add_image('image','图片')">
							<view class="banmi_flex j-c a-c "
								style="width: 200rpx;height: 200rpx;border: solid 2rpx #DCDCDC;font-size: 60px;color: #DCDCDC;">
								+
							</view>
						</view>
					</view>
					<view class="banmi_flex a-c p-10">
						<view class="" style="width: 110px;margin-left: 110px;">
							<text class="f-30 c-7">可不选择图片</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="t_type=='news'" class="banmi_flex j-c  " style="padding-top: 10px;">
				<view class="p-20 " style="width: 80%;">
					<view class="banmi_flex a-c p-10">
						<view class="banmi_input_name-30">
							<text class="f-30 c-7">文章标题:</text>
						</view>
						<view class="banmi_input_view m-l-10">
							<input type="text" placeholder="请输入标题" v-model="title"
								style="height: 40px;border-bottom: solid 1px #DCDCDC;">
						</view>
					</view>
					<view class="banmi_flex a-c p-10">
						<view class="banmi_input_name-30">
							<text class="f-30 c-7">文章描述:</text>
						</view>
						<view class="m-l-10 banmi_input_view">
							<input type="text" placeholder="文章描述50个字以内" v-model="description"
								style="height: 40px;border-bottom: solid 1px #DCDCDC;">
						</view>
					</view>

					<view class="banmi_flex a-c p-10">
						<view class="banmi_input_name-30">
							<text class="f-30 c-7">跳转url:</text>
						</view>
						<view class="m-l-10 banmi_input_view">
							<input type="text" placeholder="请输入网址" v-model="url"
								style="height: 40px;border-bottom: solid 1px #DCDCDC;">
						</view>
					</view>

					<view class="banmi_flex a-c p-10">
						<view class="banmi_input_name-30">
							<text class="f-30 c-7">图片:</text>
						</view>
						<view v-if="picurl"
							style="width: 200rpx;height: 200rpx;border: solid 2rpx #DCDCDC;font-size: 60px;color: #DCDCDC;margin: 5px;">
							<image style="width: 200rpx;height: 200rpx;" :src="picurl" mode=""></image>
						</view>
						<view class="m-l-10" @click="_add_image('image','图片')">
							<view class="banmi_flex j-c a-c "
								style="width: 200rpx;height: 200rpx;border: solid 2rpx #DCDCDC;font-size: 60px;color: #DCDCDC;">
								+
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="t_type=='music'" class="banmi_flex j-c  " style="padding-top: 10px;">
				<view class="p-20 " style="width: 80%;">
					<view class="banmi_flex a-c p-10">
						<view class="banmi_input_name-30">
							<text class="f-30 c-7">音乐标题:</text>
						</view>
						<view class=" ">
							<input type="text" class="f-14" placeholder="请输入标题" v-model="title"
								style="height: 40px;border-bottom: solid 1px #DCDCDC;">
						</view>
					</view>
					<view class="banmi_flex a-c p-10">
						<view class="banmi_input_name-30">
							<text class="f-30 c-7">音乐描述:</text>
						</view>
						<view class=" ">
							<input class="f-14" type="text" placeholder="文章描述50个字以内" v-model="description"
								style="height: 40px;border-bottom: solid 1px #DCDCDC;">
						</view>
					</view>
					<view class="banmi_flex a-c p-10">
						<view class="banmi_input_name-30">
							<text class="f-30 c-7">音乐:</text>
						</view>
						<view v-if="musicurl"
							style="width: 200rpx;height: 200rpx;border: solid 2rpx #DCDCDC;font-size: 60px;color: #DCDCDC;margin: 5px;">
							<image style="width: 200rpx;height: 200rpx;" src="@/static/play.png" mode=""></image>
						</view>
						<view class="" @click="_add_image('music','音乐')">
							<view class="banmi_flex j-c a-c "
								style="width: 200rpx;height: 200rpx;border: solid 2rpx #DCDCDC;font-size: 60px;color: #DCDCDC;">
								+
							</view>
						</view>
					</view>
					<view class="banmi_flex a-c p-10">
						<view class="banmi_input_name-30">
							<text class="f-30 c-7">音乐背景:</text>
						</view>
						<view v-if="music_img"
							style="width: 200rpx;height: 200rpx;border: solid 2rpx #DCDCDC;font-size: 60px;color: #DCDCDC;margin: 5px;">
							<image style="width: 200rpx;height: 200rpx;" :src="music_img" mode=""></image>
						</view>
						<view class="" @click="_add_image1('image','图片')">
							<view class="banmi_flex j-c a-c "
								style="width: 200rpx;height: 200rpx;border: solid 2rpx #DCDCDC;font-size: 60px;color: #DCDCDC;">
								+
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="t_type=='video'" class="banmi_flex j-c  " style="padding-top: 10px;">
				<view class="p-20 " style="width: 80%;">
					<view class="banmi_flex a-c p-10">
						<view class="banmi_input_name-30">
							<text class="f-30 c-7">视频标题:</text>
						</view>
						<view class=" m-l-10">
							<input type="text" placeholder="请输入标题" v-model="title"
								style="height: 40px;border-bottom: solid 1px #DCDCDC;">
						</view>
					</view>
					<view class="banmi_flex a-c p-10">
						<view class="banmi_input_name-30">
							<text class="f-30 c-7">视频描述:</text>
						</view>
						<view class="m-l-10">
							<input type="text" placeholder="文章描述50个字以内" v-model="description"
								style="height: 40px;border-bottom: solid 1px #DCDCDC;">
						</view>
					</view>
					<view class="banmi_flex a-c p-10">
						<view class="p-b-10 banmi_input_name-30">
							<text class="f-30 c-7">选择视频:</text>
						</view>
						<view v-if="musicurl"
							style="width: 200rpx;height: 200rpx;border: solid 2rpx #DCDCDC;font-size: 60px;color: #DCDCDC;margin: 5px;">
							<video style="width: 200rpx;height: 200rpx;" :src="musicurl"></video>
						</view>
						<view class="m-l-10" @click="_add_image('video','视频')">
							<view class="banmi_flex j-c a-c "
								style="width: 200rpx;height: 200rpx;border: solid 2rpx #DCDCDC;font-size: 60px;color: #DCDCDC;">
								+
							</view>
						</view>
					</view>
				</view>
			</view>



			<view class="uni-dialog-button-group">

				<view class="uni-dialog-button uni-border-left" @click="close">
					<text class="uni-dialog-button-text uni-button-color">关闭</text>
				</view>
				<view class="uni-dialog-button uni-border-left" @click="onplay">
					<text class="uni-dialog-button-text uni-button-color">添加</text>
				</view>

			</view>
			<uni-popup ref="alertDialog_image_x" type="dialog">
				<uni-popup-wx-image :t_type="aa_type" :t_name="aa_name" @on_add_img="on_add_img">
				</uni-popup-wx-image>
			</uni-popup>
			<uni-popup ref="alertDialog_image_a" type="dialog">
				<uni-popup-wx-image :t_type="aa_type" :t_name="aa_name" @on_add_img="on_add_img1">
				</uni-popup-wx-image>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import popup from '../uni-popup/popup.js'
	import {
		initVueI18n
	} from '@dcloudio/uni-i18n'
	import messages from '../uni-popup/i18n/index.js'
	const {
		t
	} = initVueI18n(messages)
	/**
	 * PopUp 弹出层-对话框样式
	 * @description 弹出层-对话框样式
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
	 * @property {String} value input 模式下的默认值
	 * @property {String} placeholder input 模式下输入提示
	 * @property {String} type = [success|warning|info|error] 主题样式
	 *  @value success 成功
	 * 	@value warning 提示
	 * 	@value info 消息
	 * 	@value error 错误
	 * @property {String} mode = [base|input] 模式、
	 * 	@value base 基础对话框
	 * 	@value input 可输入对话框
	 * @property {String} content 对话框内容
	 * @property {Boolean} beforeClose 是否拦截取消事件
	 * @event {Function} confirm 点击确认按钮触发
	 * @event {Function} close 点击取消按钮触发
	 */

	export default {
		name: "uniPopupDialog",
		mixins: [popup],
		emits: ['confirm', 'close'],
		props: {
			issousuo: {
				type: String,
				default () {
					return '';
				}
			},
			value: {
				type: [String, Number],
				default: ''
			},
			sm: {
				type: [String, Number],
				default: ''
			},
			li: {
				type: Array,
				default () {
					return [];
				}
			},
			isvip: {
				type: [String, Number],
				default: ''
			},
			placeholder: {
				type: [String, Number],
				default: ''
			},
			type: {
				type: String,
				default: 'error'
			},


			beforeClose: {
				type: Boolean,
				default: false
			},
			cancelText: {
				type: String,
				default: ''
			},
			t_type: {
				type: String,
				default: ''
			},
			t_name: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				dialogType: 'error',
				focus: false,
				val: "",
				tabidnex: 1,
				zd_price: 0,
				key: '',
				title: '',
				url: '',
				appid: '',
				miniprogram: '',
				picurl: '',
				musicurl: '',
				description: '',
				music_img: '',


				img_url: '',
				aa_type: '',
				aa_name: '',
				find: {
					title: '',
					url: '',
					appid: '',
					miniprogram: '',
					img_url: '',
					media_id: '',
					type: 'applets'
				}

			}
		},
		computed: {
			okText() {
				return this.confirmText || t("uni-popup.ok")
			},
			closeText() {
				return this.cancelText || t("uni-popup.cancel")
			},
			placeholderText() {
				return this.placeholder || t("uni-popup.placeholder")
			},
			titleText() {
				return this.title || t("uni-popup.title")
			}
		},
		watch: {
			type(val) {
				this.dialogType = val
			},
			mode(val) {
				if (val === 'input') {
					this.dialogType = 'info'
				}
			},
			value(val) {
				this.val = val
			}
		},
		created() {


			// 对话框遮罩不可点击
			this.popup.disableMask()
			// this.popup.closeMask()
			if (this.mode === 'input') {
				this.dialogType = 'info'
				this.val = this.value
			} else {
				this.dialogType = this.type
			}
		},
		mounted() {
			this.focus = true
		},
		methods: {
			on_add_img1(list) {
				this.media_id_mp3 = list[0]['media_id'];
				this.music_img = list[0]['attachment'];
			},

			on_add_img(list) {

				this.musicurl = list[0]['attachment'];
				this.picurl = list[0]['attachment'];
				this.img_url = list[0]['attachment'];
				this.img_list = list;
				this.media_id = list[0]['media_id'];

			},
			_add_image1(t_type, aa_name) {
				this.aa_type = t_type;
				this.aa_name = aa_name;
				this.$refs.alertDialog_image_a.open()
			},

			_add_image(t_type, aa_name) {
				this.aa_type = t_type;
				this.aa_name = aa_name;
				this.$refs.alertDialog_image_x.open()
			},
			onplay() {
				if (this.t_type == 'applets') {
					this.onplay_applets();
				} else if (this.t_type == 'news') {
					this.onplay_news();
				} else if (this.t_type == 'music') {
					this.onplay_music();
				} else if (this.t_type == 'video') {
					this.onplay_video();
				}
			},
			onplay_video() {
				if (!this.title) {
					uni.showToast({
						title: '请输入标题',
						icon: 'none'
					})
					return
				}
				if (!this.description) {
					uni.showToast({
						title: '请输入描述',
						icon: 'none'
					})
					return
				}
				if (!this.musicurl) {
					uni.showToast({
						title: '请选择视频',
						icon: 'none'
					})
					return
				}
				this.find.title = this.title;
				this.find.description = this.description;
				this.find.url = this.musicurl;
				this.find.attachment = this.musicurl;
				this.find.media_id = this.media_id;
				this.find.img_url = this.img_url;
				this.find.type = 'video';

				this.$emit('on_add_img', this.find);
				this.popup.close()
			},
			onplay_music() {
				if (!this.title) {
					uni.showToast({
						title: '请输入标题',
						icon: 'none'
					})
					return
				}
				if (!this.description) {
					uni.showToast({
						title: '请输入描述',
						icon: 'none'
					})
					return
				}
				if (!this.musicurl) {
					uni.showToast({
						title: '请选择音乐',
						icon: 'none'
					})
					return
				}
				if (!this.media_id_mp3) {
					uni.showToast({
						title: '请选择音乐背景',
						icon: 'none'
					})
					return
				}
				this.find.title = this.title;
				this.find.description = this.description;
				this.find.musicurl = this.musicurl;
				this.find.hqmusicurl = this.musicurl;
				this.find.img_url = this.img_url;
				this.find.thumb_media_id = this.media_id_mp3;
				this.find.type = 'music';
				this.$emit('on_add_img', this.find);
				this.popup.close()
			},
			onplay_news() {
				if (!this.title) {
					uni.showToast({
						title: '请输入标题',
						icon: 'none'
					})
					return
				}
				if (!this.description) {
					uni.showToast({
						title: '请输入描述',
						icon: 'none'
					})
					return
				}
				if (!this.url) {
					uni.showToast({
						title: '请输入url',
						icon: 'none'
					})
					return
				}
				if (!this.picurl) {
					uni.showToast({
						title: '请选择图片',
						icon: 'none'
					})
					return
				}
				this.find.title = this.title;
				this.find.description = this.description;
				this.find.url = this.url;
				this.find.media_id = this.media_id;
				this.find.picurl = this.picurl;
				this.find.img_url = this.img_url;
				this.find.type = 'news';
				this.$emit('on_add_img', this.find);
				this.popup.close()


			},

			onplay_applets() {
				if (!this.title) {
					uni.showToast({
						title: '请输入标题',
						icon: 'none'
					})
					return
				}
				if (!this.appid) {
					uni.showToast({
						title: '请输入小程序appid',
						icon: 'none'
					})
					return
				}
				if (!this.miniprogram) {
					uni.showToast({
						title: '请输入小程序路径',
						icon: 'none'
					})
					return
				}

				this.find.title = this.title;
				this.find.miniprogram = this.miniprogram;
				this.find.url = this.url;
				this.find.appid = this.appid;
				this.find.media_id = this.media_id;
				this.find.img_url = this.img_url;
				this.$emit('on_add_img', this.find);
				this.popup.close()

			},

			onOk() {
				if (this.mode === 'input') {
					this.$emit('confirm', this.val)
				} else {
					this.$emit('confirm')
				}
				if (this.beforeClose) return
				this.popup.close()
			},
			/**
			 * 点击取消按钮
			 */
			closeDialog() {
				this.$emit('close')
				if (this.beforeClose) return
				this.popup.close()
			},
			close() {
				this.popup.close()
			}
		}
	}
</script>


<style lang="scss">
	.classify-liv {
		text-align: center;
		align-items: center;
		padding-bottom: 10px;
		border: solid 1px #FD9A01;
		text-align: center;
		color: #999;
		border-radius: 10px;
		width: 200px;
		font-size: 24upx;
		margin: 10;

	}

	.classify-lixzlv {
		text-align: center;
		align-items: center;
		padding-bottom: 10px;
		border: solid 1px #999;

		color: #999;
		border-radius: 10px;
		width: 200px;
		font-size: 24upx;
		margin: 10;

	}

	@media screen and (max-width: 500px) {
		.uni-popup-dialog {
			width: 700rpx;
			border-radius: 11px;
			background-color: #fff;
		}
	}

	@media screen and (min-width: 500px) {
		.uni-popup-dialog {
			width: 500px;
			border-radius: 11px;
			background-color: #fff;
		}

	}

	.uni-dialog-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding-top: 25px;
	}

	.uni-dialog-title-text {
		font-size: 16px;
		font-weight: 500;
	}

	.uni-dialog-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-top: 10px;
	}

	.uni-dialog-content-text {
		font-size: 14px;
		color: #6C6C6C;
	}

	.f20 {
		font-size: 24px;
	}

	.uni-dialog-button-group {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;

	}

	.uni-dialog-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */

		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 45px;
	}

	.uni-border-left {
		border-left-color: #f0f0f0;
		border-left-style: solid;
		border-left-width: 1px;
	}

	.uni-dialog-button-text {
		font-size: 16px;
		color: #333;
	}

	.uni-button-color {
		color: #007aff;
	}

	.uni-dialog-input {
		flex: 1;
		font-size: 14px;
		border: 1px #eee solid;
		height: 40px;
		padding: 0 10px;
		border-radius: 5px;
		color: #555;
	}

	.uni-popup__success {
		color: #4cd964;
	}

	.uni-popup__warn {
		color: #f0ad4e;
	}

	.uni-popup__error {
		color: #dd524d;
	}

	.uni-popup__info {
		color: #909399;
	}
</style>